<template>
  <div class="wallet">
    <el-card :header="route.meta.title" class="relative card-full">
      <el-row :gutter="16">
        <el-col :span="24" :md="24 / 3" v-for="(x, index) in dataList">
          <el-card
            class="box-card sm:mb-4"
            :style="{ '--el-card-bg-color': bgColors[index] }"
          >
            <strong class="text-lg" :style="{ color: textColors[index] }">
              {{ x.title }}
            </strong>
            <div class="font-600 text-[31px] pt-6">{{ x.total }}</div>
            <div class="text-xs text-[#555] pt-2">
              <span>{{ x.leftPre }}</span>
              <span class="pr-2">{{ x.leftVal }}</span>
              <span>{{ x.rightPre }}</span>
              <span>{{ x.rightVal }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="bottom-buttons">
        <el-button type="primary" disabled>
          立即充值
        </el-button>
        <router-link to="./moneyLog">
          <el-button type="danger" plain>流水明细</el-button>
        </router-link>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, computed } from "vue"
import { getUserWalletApi } from "@/api/user"
import { useRoute } from "vue-router"

const route = useRoute()

const bgColors = ["#EAF6ED", "#FFF1E3", "#FFECEF"]
const textColors = ["#529262", "#9B7550", "#963B4A"]
const dataList = ref([])
const getData = async () => {
  const res = await getUserWalletApi()
  if (res.success) {
    const data = res.data as any
    const list = [] as any
    const keys = ["totalMoney", "freezeMoney", "voucher"]
    keys.forEach((key) => {
      list.push(data[key])
    })
    dataList.value = [...list] as any
  }
}
getData()
</script>

<style lang="scss" scoped>
.box-card {
  border-radius: 6px;
}
</style>
